import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, ScrollView, Alert } from 'react-native';
import { Button, Flex, WhiteSpace, WingBlank, InputItem, PickerView, Modal, Provider, Toast, List } from '@ant-design/react-native';
import { GetBankList, SaveBankCardInfo } from '~/api/public';

export default class AddBankCard extends Component {
    static navigationOptions = {
        title: '添加银行卡信息',
    };

    constructor(props) {
        super(props);
        this.state = {
            with: this.props.navigation.getParam('with'),
            labelnum1: '',
            bankCard: '',
            phone: '',
            value: undefined,
            bankName: '请选择银行',
            bankId: 0,
            visible2: false,
            sea: [],
            PuBankcardID: this.props.navigation.getParam('PuBankcardID'),
        };
        this.onChange = (value) => {
            this.setState({
                value,
            });
        };
        GetBankList().then((r) => {
            if (r.code === 0) {
                let list = [];
                r.data.forEach((item) => {
                    list.push({
                        label: item.BankName,
                        value: item.PuBankID,
                    });
                });
                this.setState({
                    sea: list,
                });
            } else {
                alert('失败');
            }
        });
        this.onClose2 = () => {
            this.setState({
                visible2: false,
            });
        };
        this.onChanges = (values) => {
            if (values != '' && values != undefined) {
                let item = this.state.sea.find((item) => item.value === values[0]);
                this.setState({
                    bankName: item.label,
                    bankId: values[0],
                });
            }
        };
        this.OnPress = () => {
            if (this.state.bankName === '' || this.state.bankName === '请选择银行') {
                Toast.info('请选择银行', 1);
            } else if (this.state.labelnum1 === '') {
                Toast.info('请输入姓名', 1);
            } else if (this.state.bankCard === '') {
                Toast.info('请输入银行卡号', 1);
            } else if (this.state.phone === '') {
                Toast.info('请输入电话号码', 1);
            } else if (!/^1[3-9]\d{9}$/.test(this.state.phone)) {
                Toast.info('请输入正确电话号码', 1);
            } else {
                SaveBankCardInfo({
                    PuBankcardID: this.state.with === 1 ? 0 : this.state.PuBankcardID,
                    PuBankID: this.state.bankId,
                    BankBranch: this.state.bankName,
                    CardNo: this.state.bankCard,
                    CardHolder: this.state.labelnum1,
                }).then((r) => {
                    if (r.code === 0) {
                        Toast.info('添加成功', 1);
                        if (this.state.with === 1) {
                            this.props.navigation.push('Withdrawal');
                        } else {
                            this.props.navigation.push('MyCardBag');
                        }
                    } else {
                        Toast.info('添加失败', 1);
                    }
                });
            }
        };
    }

    render() {
        return (
            <>
                <ScrollView style={{ flex: 1 }}>
                    <WhiteSpace />
                    <View
                        style={{
                            width: '100%',
                            alignItems: 'center',
                            padding: 8,
                            flexDirection: 'row',
                            backgroundColor: '#FFFFFF',
                        }}>
                        <Text style={{ width: '30%', paddingLeft: 10 }}><Text style={{ color: 'red' }}>*</Text>请选择银行：</Text>
                        <Button
                            style={{ width: '63%', alignItems: 'flex-start', borderColor: '#FFFFFF' }}
                            onPress={() => {
                                this.setState({ visible2: true });
                                if (this.state.bankId === 0) {
                                    this.setState({
                                        bankId: this.state.sea[0].value,
                                        bankName: this.state.sea[0].label,
                                    });
                                }
                            }}>
                            {this.state.bankName}
                        </Button>
                        <Modal popup visible={this.state.visible2} animationType="slide-up" onClose={this.onClose2}>
                            <View
                                style={{
                                    paddingVertical: 20,
                                    paddingHorizontal: 20,
                                }}>
                                <PickerView onChange={this.onChanges} value={[this.state.bankId]} data={this.state.sea} cols={1} />
                            </View>
                            <Button type="primary" onPress={this.onClose2}>
                                确定
                            </Button>
                        </Modal>
                    </View>
                    <View style={{ with: '100%', backgroundColor: '#FFFFFF', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ width: '28%', paddingLeft: 10 }}><Text style={{ color: 'red' }}>*</Text>姓名:</Text>
                        <List style={{ width: '68%' }}>
                            <InputItem
                                clear
                                value={this.state.labelnum1}
                                onChange={(value) => {
                                    this.setState({
                                        labelnum1: value,
                                    });
                                }}
                                placeholder="请输入姓名"
                            />
                        </List>
                    </View>
                    <View style={{ with: '100%', backgroundColor: '#FFFFFF', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ width: '28%', paddingLeft: 10 }}><Text style={{ color: 'red' }}>*</Text>银行卡号:</Text>
                        <List style={{ width: '68%' }}>
                            <InputItem
                                clear
                                type={'bankCard'}
                                maxLength={24}
                                value={this.state.bankCard}
                                onChange={(value) => {
                                    this.setState({
                                        bankCard: value,
                                    });
                                }}
                                placeholder="请输入银行卡号"
                            />
                        </List>
                    </View>
                    <View style={{ with: '100%', backgroundColor: '#FFFFFF', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ width: '28%', paddingLeft: 10 }}><Text style={{ color: 'red' }}>*</Text>手机号码:</Text>
                        <List style={{ width: '68%' }}>
                            <InputItem
                                clear
                                maxLength={11}
                                type={'number'}
                                value={this.state.phone}
                                onChange={(value) => {
                                    this.setState({
                                        phone: value,
                                    });
                                }}
                                placeholder="请输入手机号码"
                            />
                        </List>
                    </View>
                    <WingBlank>
                        <Text style={{ marginTop: 20, color: '#9E9E9E' }}>请绑定持卡人本人的银行卡</Text>
                    </WingBlank>
                    <WingBlank style={styles.button}>
                        <Button
                            type="warning"
                            onPress={() => {
                                this.OnPress();
                            }}>
                            下一步
                        </Button>
                    </WingBlank>
                </ScrollView>
            </>
        );
    }
}

const styles = StyleSheet.create({
    textleft: {
        alignItems: 'center',
        fontWeight: 'bold',
    },
    button: {
        marginTop: 20,
        marginBottom: 50,
    },
});
